<?php include 'head.php'; ?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>问题管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-header"></div>
        <div class="layui-card-body">
            <fieldset class="layui-elem-field">
                <legend>搜索题目</legend>
                <div style="margin: 10px 10px 10px 10px" id="btn">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" name="keyword" id="filtertitle" autocomplete="off">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-primary" lay-submit data-type="reload" lay-filter="data-search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <table id="question" lay-filter="question"></table>
        </div>
    </div>

    <script type="text/html" id="answer">
    {{# if(d.answer == 'options1'){ }}
        A
        {{# } else if(d.answer == 'options2'){ }}
            B
            {{# } else if(d.answer == 'options3'){ }}
                C
                {{# } else if(d.answer == 'options4'){ }}
                    D
                    {{# } else { }}
                        系统错误
                        {{# } }}
    </script>

    <script type="text/html" id="question-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增问题
        </button>
    </script>

    <script type="text/html" id="question-bar">
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    </script>
</body>
<script src="/component/layui/layui.js"></script>

<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['layer', 'element', 'popup', 'table', 'loading'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            popup = layui.popup,
            table = layui.table,
            loading = layui.loading;

        table.render({
            elem: '#question',
            height: 500,
            url: './ajax.php?act=getque',
            page: true,
            escape: true,
            toolbar: '#question-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            cols: [
                [{
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        sort: true,
                        fixed: 'left'
                    }, {
                        field: 'title',
                        title: '标题',
                        sort: true
                    }, {
                        field: 'options1',
                        title: '选项A',
                    }, {
                        field: 'options2',
                        title: '选项B',
                    }, {
                        field: 'options3',
                        title: '选项C',
                    }, {
                        field: 'options4',
                        title: '选项D'
                    }, {
                        field: 'answer',
                        title: '答案',
                        width: 100,
                        templet: '#answer'
                    }, {
                        field: 'parse',
                        title: '解析',
                        sort: true
                    },
                    {
                        title: '操作',
                        toolbar: '#question-bar',
                        align: 'left',
                        width: 150,
                        fixed: 'right'
                    }
                ]
            ],
            id: 'question'
        });


        table.on('tool(question)', function(obj) {
            if (obj.event === 'remove') {
                layer.confirm('确定要删除该问题', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    loading.Load(1, "请稍等");
                    $.ajax({
                        url: "ajax.php?act=delque",
                        type: "POST",
                        timeout: "5000",
                        data: {
                            id: obj.data['id']
                        },
                        success: function(result) {
                            loading.loadRemove();
                            if (result.code == 200) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                }, function() {
                                    obj.del();
                                });
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                });
            }
        });

        table.on('toolbar(question)', function(obj) {
            if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    title: '新增问题',
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['500px', '500px'],
                    content: 'addque.php'
                });
            } else if (obj.event === 'refresh') {
                table.reload('question');
            }
        });

        $('[data-type="reload"]').on('click', function() {
            //执行重载
            table.reload('question', {
                page: {
                    curr: 1
                },
                where: {
                        title: $('#filtertitle').val(),
                }
            }, 'data');
        });

    });
</script>

</html>